<template>
  <v-chart
    :theme="theme"
    :loading="loading"
    :loadingOptions="loadingOptions"
    :initOptions="initOptions"
    @mouseover="handleMouseOver"
    @mouseout="handleMouseOut"
    :options="config"
    v-on="$listeners"
    ref="pie"
  />
</template>
<script>
import VChart from '../../Core'

import { summate } from '../../../utils'
import { titleTextStyle, pieEmphasisLabel } from '../../itemDefaultConfig'

let index = 0 // 高亮索引

export default {
  name: 'PieChart',
  components: {
    VChart,
  },
  props: {
    showTitle: {
      type: Boolean,
      default: false,
    },
    loadingOptions: Object, // loading 状态配置项
    loading: {
      type: Boolean,
      default: false,
    },
    radius: {
      type: [String, Array],
      default: function() {
        return ['25%', '40%']
      }, // [内半径, 外半径]
    },
    center: {
      type: Array,
      default: function() {
        return ['25%', '50%']
      }, // [x, y]
    },
    initOptions: Object,
    options: {
      type: Object,
      default: function() {
        return {}
      },
    },
    theme: {
      type: [String, Object],
      default: 'xm',
    },
  },

  computed: {
    config() {
      const { title, legend, tooltip, series, ...otherConfig } = this.options

      const option = {
        title: {
          ...titleTextStyle,
          show: this.showTitle, // title.show优先级高于showTitle
          ...title,
        },
        tooltip: {
          trigger: 'item',
          confine: true,
          formatter: '{a} <br/>{b}: {c}',
          ...tooltip,
        },
        legend: {
          top: 'center',
          type: 'scroll',
          orient: 'vertical',
          right: '0%',
          itemGap: 15,
          icon: 'pin',
          selectedMode: false,
          textStyle: {
            fontSize: 14,
            rich: {
              name: {
                color: '#262A30',
              },
              value: {
                padding: [0, 5, 0, 5],
              },
              percent: {
                color: '#00A9FF',
              },
            },
          },

          formatter: function(name) {
            const total = summate(series[0].data)
            const res = series[0].data.filter(v => v.name === name)
            const percent = ((res[0].value * 100) / total).toFixed(2)
            return (
              '{name|' +
              (name.length > 8 ? name.substring(0, 8) + '...' : name) +
              '} {value|' +
              res[0].value +
              '} {percent|' +
              percent +
              '%}'
            )
          },
          ...legend,
        },

        series: (series || []).map(item => ({
          type: 'pie',
          label: { show: false, position: 'center' },
          radius: this.radius,
          center: this.center,
          emphasis: {
            label: {
              ...pieEmphasisLabel,
            },
          },
          ...item,
        })),
        ...otherConfig,
      }

      return option
    },
  },
  watch: {
    options() {
      this.$nextTick(() => {
        this.handleSelect()
      })
    },
  },
  mounted() {
    this.handleSelect()
  },
  methods: {
    getEchartsInstance() {
      return this.$refs.pie.chart
    },
    handleMouseOver(e) {
      if (e.dataIndex != index) {
        this.getEchartsInstance().dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: index,
        })
      } else {
        this.getEchartsInstance().dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: 0,
        })
      }
    },
    handleMouseOut(e) {
      index = e.dataIndex
      this.getEchartsInstance().dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: e.dataIndex,
      })
    },
    handleSelect() {
      const pieChart = this.getEchartsInstance()
      pieChart &&
        pieChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: index,
        })
    },
  },
}
</script>
